import { useState } from 'react'
import BaseLayout from '@/layouts/BaseLayout/BaseLayout'
import Codepensvg from '@/utils/Codepensvg'
import Copysvg from '@/utils/Copysvg'
import { Badge, Avatar, Icon } from 'ygbh'
import classNames from 'classnames';

function Case1(props:any) {
	const codeUrl = 'https://codepen.io/xiebaolin/pen/PoKGBRR';
	const codeVal = `
	import { Avatar } from 'ygbh';
	ReactDOM.render(
	  <>
	    <div>
		<Badge count={5} className="mr20">
		    <Avatar shape="square" size="large" />
		</Badge>
		<Badge count={0} className="mr20">
		    <Avatar shape="square" size="large" />
		</Badge>
		<Badge count={0} showZero className="mr20">
		    <Avatar shape="square" size="large" />
		</Badge>
	    </div>
	  </>,
	  mountNode,
	);
	`;
	//实例-start
	const [showCoreFlag, setShowCoreFlag] = useState(false);
	
	const classString = classNames('source-case-mod', {
		'show-case-core': showCoreFlag,
	});
	const toggleCoreFlag = () => {
		setShowCoreFlag(!showCoreFlag);
	};
	const copyCaseFn = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
		alert('复制成功');
	};
	return (<div className="demo-block">
	    <section className={classString}>
	        <section className="code-box-demo">
	            <div>
					<Badge count={5} className="mr20">
					    <Avatar shape="square" size="large" />
					</Badge>
					<Badge count={0} className="mr20">
					    <Avatar shape="square" size="large" />
					</Badge>
					<Badge count={0} showZero className="mr20">
					    <Avatar shape="square" size="large" />
					</Badge>
				</div>
	        </section>
	        <section className="code-box-meta">
	            <div className="code-box-title">基本</div>
	            <div className="code-box-description">简单的徽章展示，当 count 为 0 时，默认不显示，但是可以使用 showZero 修改为显示。</div>
	            <div className="code-box-actions">
	            	<a href={codeUrl} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
	            		<Codepensvg></Codepensvg>
	            	</a>
	            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn}>
	            	    <Copysvg></Copysvg>
	            	</span>
	            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag}></span>
	            </div>
	        </section>
	        <section className="highlight-wrapper">
	            <textarea className="demo-core-box" readOnly={true} defaultValue={codeVal}></textarea>
	        </section>
		</section>
	</div>);
}

function Case2(props:any) {
	const codeUrl = 'https://codepen.io/xiebaolin/pen/PoKGBRR';
	const codeVal = `
	import { Avatar } from 'ygbh';
	ReactDOM.render(
	  <>
	    <div>
		<Badge count={99} className="mr20" title='这是提示语'>
		    <Avatar shape="square" size="large" />
		</Badge>
		<Badge count={100} className="mr20">
		    <Avatar shape="square" size="large" />
		</Badge>
		<Badge count={99} overflowCount={10} className="mr20">
		    <Avatar shape="square" size="large" />
		</Badge>
		<Badge count={1000} overflowCount={999} className="mr20">
		    <Avatar shape="square" size="large" />
		</Badge>
	    </div>
	  </>,
	  mountNode,
	);
	`;
	//实例-start
	const [showCoreFlag, setShowCoreFlag] = useState(false);
	
	const classString = classNames('source-case-mod', {
		'show-case-core': showCoreFlag,
	});
	const toggleCoreFlag = () => {
		setShowCoreFlag(!showCoreFlag);
	};
	const copyCaseFn = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
		alert('复制成功');
	};
	return (<div className="demo-block">
	    <section className={classString}>
	        <section className="code-box-demo">
	            <div>
					<Badge count={99} className="mr20" title='这是提示语'>
					    <Avatar shape="square" size="large" />
					</Badge>
					<Badge count={100} className="mr20">
					    <Avatar shape="square" size="large" />
					</Badge>
					<Badge count={99} overflowCount={10} className="mr20">
					    <Avatar shape="square" size="large" />
					</Badge>
					<Badge count={1000} overflowCount={999} className="mr20">
					    <Avatar shape="square" size="large" />
					</Badge>
				</div>
	        </section>
	        <section className="code-box-meta">
	            <div className="code-box-title">封顶数字</div>
	            <div className="code-box-description">超过 overflowCount 的会显示为 overflowCount+，默认的 overflowCount 为 99。</div>
	            <div className="code-box-actions">
	            	<a href={codeUrl} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
	            		<Codepensvg></Codepensvg>
	            	</a>
	            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn}>
	            	    <Copysvg></Copysvg>
	            	</span>
	            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag}></span>
	            </div>
	        </section>
	        <section className="highlight-wrapper">
	            <textarea className="demo-core-box height400" readOnly={true} defaultValue={codeVal}></textarea>
	        </section>
		</section>
	</div>);
}

function Case3(props:any) {
	const codeUrl = 'https://codepen.io/xiebaolin/pen/PoKGBRR';
	const codeVal = `
	import { Avatar } from 'ygbh';
	ReactDOM.render(
	  <>
	    <div>
		<Badge count={0} className="mr20" />
		<Badge count={25} className="mr20" />
		<Badge count={<Icon name="picture-outline"></Icon>} className="mr20" />
		<Badge count={109} className="mr20" style={{ backgroundColor: '#52c41a' }} />
	    </div>
	  </>,
	  mountNode,
	);
	`;
	//实例-start
	const [showCoreFlag, setShowCoreFlag] = useState(false);
	
	const classString = classNames('source-case-mod', {
		'show-case-core': showCoreFlag,
	});
	const toggleCoreFlag = () => {
		setShowCoreFlag(!showCoreFlag);
	};
	const copyCaseFn = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
		alert('复制成功');
	};
	return (<div className="demo-block">
	    <section className={classString}>
	        <section className="code-box-demo">
	            <div>
	                <Badge count={0} className="mr20" />
	                <Badge count={25} className="mr20" />
	                <Badge count={<Icon name="picture-outline"></Icon>} className="mr20" />
	                <Badge count={109} className="mr20" style={{ backgroundColor: '#52c41a' }} />
				</div>
	        </section>
	        <section className="code-box-meta">
	            <div className="code-box-title">独立使用</div>
	            <div className="code-box-description">不包裹任何元素即是独立使用，可自定样式展现。</div>
	            <div className="code-box-actions">
	            	<a href={codeUrl} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
	            		<Codepensvg></Codepensvg>
	            	</a>
	            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn}>
	            	    <Copysvg></Copysvg>
	            	</span>
	            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag}></span>
	            </div>
	        </section>
	        <section className="highlight-wrapper">
	            <textarea className="demo-core-box height250" readOnly={true} defaultValue={codeVal}></textarea>
	        </section>
		</section>
	</div>);
}

function Case4(props:any) {
	const codeUrl = 'https://codepen.io/xiebaolin/pen/PoKGBRR';
	const codeVal = `
	import { Avatar } from 'ygbh';
	ReactDOM.render(
	  <>
		<Badge size="default" count={5} className="mr20">
		    <Avatar shape="square" size="large" />
		</Badge>
		<Badge size="small" count={5} className="mr20">
		    <Avatar shape="square" size="large" />
		</Badge>
	  </>,
	  mountNode,
	);
	`;
	//实例-start
	const [showCoreFlag, setShowCoreFlag] = useState(false);
	
	const classString = classNames('source-case-mod', {
		'show-case-core': showCoreFlag,
	});
	const toggleCoreFlag = () => {
		setShowCoreFlag(!showCoreFlag);
	};
	const copyCaseFn = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
		alert('复制成功');
	};
	return (<div className="demo-block">
	    <section className={classString}>
	        <section className="code-box-demo">
	            <div>
					<Badge size="default" count={5} className="mr20">
					    <Avatar shape="square" size="large" />
					</Badge>
					<Badge size="small" count={5} className="mr20">
					    <Avatar shape="square" size="large" />
					</Badge>
				</div>
	        </section>
	        <section className="code-box-meta">
	            <div className="code-box-title">大小</div>
	            <div className="code-box-description">可以设置有数字徽标的大小。</div>
	            <div className="code-box-actions">
	            	<a href={codeUrl} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
	            		<Codepensvg></Codepensvg>
	            	</a>
	            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn}>
	            	    <Copysvg></Copysvg>
	            	</span>
	            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag}></span>
	            </div>
	        </section>
	        <section className="highlight-wrapper">
	            <textarea className="demo-core-box height250" readOnly={true} defaultValue={codeVal}></textarea>
	        </section>
		</section>
	</div>);
}


function Demo() {
	return (
		<BaseLayout>
		    <h2 className="intro-title">Badge 徽标数</h2>
		    <p className="intro-content">图标右上角的圆形徽标数字。</p>
			<h3 className="show-case-title">代码演示</h3>
			{/*演示*/}
			<Case1></Case1>
			<Case2></Case2>
			<Case3></Case3>
			<Case4></Case4>

		    {/*介绍*/}
			<h3 className="base-title">Attributes</h3>
			<table className="attri-table">
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>className</td>
						<td>分割线样式类</td>
						<td>string</td>
						<td>--</td>
					</tr>
					<tr>
						<td>count</td>
						<td>展示的数字，大于 overflowCount 时显示为 overflowCount+，为 0 时隐藏</td>
						<td>ReactNode</td>
						<td>--</td>
					</tr>
					<tr>
						<td>overflowCount</td>
						<td>展示封顶的数字值</td>
						<td>number</td>
						<td>99</td>
					</tr>
					<tr>
						<td>showZero</td>
						<td>当数值为 0 时，是否展示 Badge</td>
						<td>boolean</td>
						<td>false</td>
					</tr>
					<tr>
						<td>size</td>
						<td>在设置了 count 的前提下有效，设置小圆点的大小</td>
						<td>default | small</td>
						<td>--</td>
					</tr>
					<tr>
						<td>title</td>
						<td>设置鼠标放在状态点上时显示的文字</td>
						<td>string</td>
						<td>--</td>
					</tr>
				</tbody>
			</table>
		</BaseLayout>
	)
}

export default Demo
